<%--
  Created by IntelliJ IDEA.
  User: landeqing
  Date: 2018/1/19
  Time: 22:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/jquery/jquery-3.2.1.min.js"></script>
<html>
<head>
    <title>修改商品页面</title>
    <script type="text/javascript">
        function typeTwoList() {
            var oneTypeId=$("#top").val();
            $("#center option").remove();
            $.ajax({
                url: "/productTotalList/productTwoTypeList?oneTypeId=" + oneTypeId,
                type: "get",
                cache: false,
                success: function (res) {
                    var typeTwoList = eval(res);
                    for (var i = 0; i < typeTwoList.length; i++) {
                        var option = document.createElement("option");
                        $(option).val(typeTwoList[i].id);
                        $(option).text(typeTwoList[i].type_name_two);
                        $('#center').append(option);
                    }
                    typeThreeList();
                }
            });
        }

        function typeThreeList() {
            var twoTypeId=$("#center").val();
           $("#button option").remove();
            $.ajax({
                url: "/productTotalList/productThreeTypeList?twoTypeId=" + twoTypeId,
                type: "get",
                cache: false,
                success: function (res) {
                    var typeThreeList = eval(res);
                    var typeThreeId='${typeThreeId}';
                    for (var i = 0; i < typeThreeList.length; i++) {
                        var option = document.createElement("option");
                        $(option).val(typeThreeList[i].id);
                        if(typeThreeList[i].id==typeThreeId){
                            $(option).attr("selected",true);
                        }
                        $(option).text(typeThreeList[i].type_name_three);
                        $('#button').append(option);
                    }
                }
            });
        }

//        $(document).ready(function () {
//            typeTwoList()
//        })
    </script>
</head>
<body>
<form method="post" action="/product/update">
    <input type="hidden" name="id" value="${product.id}"/>
    <table>
        <tr>
            <td>
                商品名称:<input type="text" name="productName" value="${product.product_name}"/>
            </td>
        </tr>
        <tr>
            <td>
                屏幕大小: <input type="text" name="size" value="${product.size}"/>
            </td>
        </tr>
        <tr>
            <td>
                商品价格: <input type="text" name="price" value="${product.price}"/>
            </td>
        </tr>
        <tr>
            <td>
                分辨率: <input type="text" name="resolution" value="${product.resolution}"/>
            </td>
        </tr>
        <tr>
            <td>
                产地: <input type="text" name="place" value="${product.place}"/>
            </td>
        </tr>
        <tr>
            <td>类型:<select name="typeOne" onchange="typeTwoList()" id="top">
                <c:forEach items="${typeOneList}" var="obj">
                    <option value="${obj.id}" <c:if test="${obj.id==typeOneId}"> selected="selected" </c:if>>
                            ${obj.type_name_one}</option>
                </c:forEach>
            </select>
            </td>
            <td>
                <select name="typeTwo" id="center" onchange="typeThreeList()">
                    <c:forEach items="${typeTwoList}" var="obj">
                        <option value="${obj.id}" <c:if test="${obj.id==typeTwoId}">selected="selected"</c:if>>
                            ${obj.type_name_two}</option>
                    </c:forEach>
                </select>
            </td>
            <td>
                <select name="typeId" id="button">
                    <c:forEach var="obj" items="${typeThreeList}">
                        <option value="${obj.id}" <c:if test="${obj.id==typeThreeId}">selected="selected"</c:if>>
                        ${obj.type_name_three}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
    </table>
    <input type="submit" value="提交">
</form>
</body>
</html>
